import React, { PureComponent } from 'react'

import { Table, Icon } from 'antd';
import Ellipsis from '@/components/Ellipsis';
import { connect } from 'dva';
import { Dispatch } from 'typings/redux';
import styled from 'styled-components';

const Footer = styled.div`
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 1px;
  align-items: center;
  color: #ED7109;
  font-size: 16px;
  height: 50px;
  z-index: 10;
  padding-left: 10px;
  border-top: 1px solid #DEE1E7;
  @media screen and (max-width: 1440px) {
    font-size: 13px;
    height: 70px;
    display: block;
	}
`
const Header = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: rgba(51,51,51,1);
  line-height: 24px;
  letter-spacing: 1px;
  padding-left: 23px
`

interface P {
  dispatch?: Dispatch;
  data?: Array<any>;
  loading?: boolean;
  month?: number;
  incidenceCurr?: Array<any>,
  incidenceLast?: Array<any>,
}

@connect(({ unit_report, loading }) => ({
  incidenceCurr: unit_report.incidenceCurr || [],
  incidenceLast: unit_report.incidenceLast || [],
  loading: loading.effects['unit_report/queryIncidence'],
}))
class Incidence extends PureComponent<P> {

  componentDidMount() {
    const { dispatch, month } = this.props;
    // console.log(month);

    dispatch({ type: 'unit_report/queryIncidence', payload: { month } })
  }

  render() {
    const column = [
      {
        title: '序号',
        dataIndex: 'idNum',
      },
      {
        title: '报警次数',
        dataIndex: 'count',
      },
      {
        title: '报警类型',
        dataIndex: 'kindName',
      },
      {
        title: '报警点位',
        dataIndex: 'location',
        render: (text) => (
          <Ellipsis tooltip={true} lines={1}>
            {text || ''}
          </Ellipsis>
        )
      },
      // {
      //   title: '最近报警时间',
      //   dataIndex: 'pushTime'
      // }
    ];

    const { incidenceCurr, incidenceLast, month } = this.props;
    const data = month === new Date().getMonth() ? incidenceCurr : incidenceLast
    const ans = Array.isArray(data) ? data.map((v, i) => ({
      idNum: i + 1 < 10 ? `0${i + 1}` : i + 1,
      key: i,
      ...v
    })) : [];

    return (
      <div style={{ position: 'relative' }} >
        <Table
          columns={column}
          dataSource={ans}
          pagination={false}
          style={{ height: '544px', marginBottom: '20px', background: '#fff' }}
          // scroll={{ y: 'calc(49vh - 100px)' }}
          loading={this.props.loading}
          title={() => <Header>{month || '-'}月报警高发部位TOP10</Header>}
          size="small"
        />
        {

          data[0] ? <Footer>
            <Icon type="message" style={{ marginRight: 5 }} />{month}月发生报警次数最多的是「{data[0]?.location}」的{data[0]?.kindName}，需要重点关注。
          </Footer> : null

        }
      </div>

    )
  }
}
export default Incidence;
